<!--
 * @Author: FengTeng
 * @Date: 2021-02-18 20:27:52
 * @LastEditTime: 2021-03-03 12:49:27
 * @LastEditors: FengTeng
 * @Description: Description
 * @FilePath: \spa-manage\src\components\modal\member-detail-modal\MemberDetailModal.vue
-->
<template>
  <div class="member-detail-modal" :class="{ 'z-index': !modalConfig.visible }">
    <spa-modal :modalConfig="modalConfig" @dialog-close="handleDialogClose()">
      <el-form :rules="memberDetailConfig.rules" ref="memberDetailRef" :model="memberDetailData">
        <el-form-item label="称呼：" prop="nickname">
          <el-input v-model="memberDetailData.nickname" :disabled="memberType.nickname.disabled"></el-input>
        </el-form-item>
        <el-form-item label="联系方式:" prop="phoneNumber">
          <el-input v-model="memberDetailData.phoneNumber" :disabled="memberType.phoneNumber.disabled"></el-input>
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
          <el-input v-model="memberDetailData.sex" :disabled="memberType.sex.disabled"></el-input>
        </el-form-item>
        <el-form-item label="创建人：" prop="creator">
          <el-input v-model="memberDetailData.creator" :disabled="memberType.nickname.disabled"></el-input>
        </el-form-item>
        <el-form-item label="创建时间：" prop="createdDate">
          <el-input v-model="memberDetailData.createdDate" :disabled="memberType.createdDate.disabled"></el-input>
        </el-form-item>
        <el-form-item label="跟进人：" prop="follower">
          <el-input v-model="memberDetailData.follower" :disabled="memberType.follower.disabled"></el-input>
        </el-form-item>
        <el-form-item label="负责人：" prop="director">
          <el-input v-model="memberDetailData.director" :disabled="memberType.director.disabled"></el-input>
        </el-form-item>
        <el-form-item label="成交时间：" prop="transactionTime">
          <el-input
            v-model="memberDetailData.transactionTime"
            :disabled="memberType.transactionTime.disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="消费总金额：" prop="totalCost">
          <el-input v-model="memberDetailData.totalCost" :disabled="memberType.totalCost.disabled"></el-input>
        </el-form-item>
        <el-form-item class="selected-products" label="服务内容" prop="selectedProducts">
          <template v-if="cardReShow">
            <el-card
              class="product-card"
              v-for="product in memberDetailData.selectedProducts"
              :key="product.productName"
            >
              <div slot="header" class="card-header">
                <el-tooltip :content="product.productName" placement="top">
                  <span style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">{{
                    product.productName
                  }}</span>
                </el-tooltip>
                <el-button v-if="userPermissions.memberManage.useProduct" type="text" @click="handleUseProduct(product)"
                  >使用</el-button
                >
              </div>
              <div class="text item">
                {{ "金额：" + product.productPrice }}
              </div>
              <div class="text item">
                {{ "剩余次数：" + product.residueDegree }}
              </div>
            </el-card>
          </template>
        </el-form-item>
        <el-form-item class="expend-log" label="消费记录" prop="expendLog">
          <el-input
            type="textarea"
            placeholder="消费记录"
            v-model="memberDetailData.expendLog"
            resize="none"
            :rows="7"
            :disabled="memberType.expendLog.disabled"
          >
          </el-input>
        </el-form-item>
        <el-form-item class="form-option-button" label="">
          <el-button type="info" @click="handleCancel()">取消</el-button>
          <el-button type="primary" :loading="confirmBtnLoading" @click="handleConfirm()">确定</el-button>
        </el-form-item>
      </el-form>
    </spa-modal>
  </div>
</template>

<script>
import $ from "jquery";
import apis from "@/apis/index.js";
import SpaModal from "@/components/spa-modal/SpaModal.vue";
// import SpaCard from "@/components/spa-card/SpaCard.vue";
import { mapState } from "vuex";
export default {
  name: "CustomerDetailModal",
  components: {
    SpaModal
  },
  props: {
    modalConfig: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      memberDetailData: {
        nickname: "",
        phoneNumber: "",
        sex: "",
        creator: "",
        createdDate: "",
        director: "",
        follower: "",
        intention: "",
        transactionTime: "",
        totalCost: "",
        transactionPercent: "",
        followLog: ``,
        spaProductItems: [],
        selectedProducts: [],
        expendLog: ""
      },
      memberDetailConfig: {
        rules: {}
      },
      memberType: {
        type: "normal",
        nickname: {
          disabled: true
        },
        phoneNumber: {
          disabled: true
        },
        sex: {
          disabled: true
        },
        creator: {
          disabled: true
        },
        createdDate: {
          disabled: true
        },
        follower: {
          disabled: true
        },
        director: {
          disabled: true
        },
        transactionTime: {
          disabled: true
        },
        totalCost: {
          disabled: true
        },
        intention: {
          disabled: true
        },
        transactionPercent: {
          disabled: false
        },
        followLog: {
          disabled: true
        },
        expendLog: {
          disabled: true
        }
      },
      transactionPercents: [1, 2, 3, 4, 5],
      followLogTemp: "", // 跟进记录暂存
      confirmBtnLoading: false,
      cardReShow: true
    };
  },
  computed: {
    ...mapState({
      userPermissions: state => state.permissionModule.permissions
    })
  },
  methods: {
    openModal(event) {
      this.getMemberDetailData(event.id);
      // this.memberDetailData.expendLog = `20201125 12:56:55  购买 全身香氛SPA皇室套餐-8800\n20201125 13:15:23   完成 全身香氛SPA皇室套 一次\n`;
      this.modalConfig.visible = true;
    },
    getMemberDetailData(memberId) {
      let that = this;
      $.post(
        apis.getMemberDetailData,
        {
          id: memberId,
          type: "find"
        },
        resp => {
          resp = JSON.parse(resp);
          if (resp.code === "ok") {
            that.setMemberDetailData(resp);
          } else {
            this.$message.error(resp.msg);
          }
        }
      );
    },
    setMemberDetailData(resp) {
      this.memberDetailData.nickname = resp.data[0].chenghu;
      this.memberDetailData.phoneNumber = resp.data[0].phone;
      this.memberDetailData.sex = resp.data[0].sex;
      this.memberDetailData.creator = resp.data[0].cjren;
      this.memberDetailData.createdDate = resp.data[0].time;
      this.memberDetailData.director=resp.data[0].cjren;
      this.memberDetailData.follower = resp.data[0].gjren;
      this.memberDetailData.intention = resp.data[0].chenjiaoyixiang;
      this.memberDetailData.transactionTime=resp.data[0].endtime;
      this.memberDetailData.totalCost=resp.data[0].xiaofeizongjie;
      this.memberDetailData.transactionPercent = resp.data[0].chengjiao;
      this.memberDetailData.followLog = resp.data[0].gjjilu;
      this.memberDetailData.spaProductItems = [];
      this.memberDetailData.selectedProducts = [];
      this.memberDetailData.expendLog = "";

      // 测试
      this.memberDetailData.followLog = "";
      this.memberDetailData.selectedProducts = [
        { productName: "健胃消食片", productPrice: "1000", residueDegree: 6 },
        { productName: "无尽之刃", productPrice: "3000", residueDegree: 3 },
        { productName: "旺仔牛奶", productPrice: "3000", residueDegree: 2 },
        { productName: "旺仔QQ糖", productPrice: "10", residueDegree: 9 }
      ];
    },
    handleUseProduct(product) {
      if (product.residueDegree === 0) {
        this.$message.warning("该商品或服务已完成！");
        return;
      }
      product.residueDegree -= 1;
      let logCreatedDate = new Date();
      logCreatedDate = this.formatDate(logCreatedDate);
      this.memberDetailData.expendLog += logCreatedDate + "完成 " + product.productName + " 一次\n";
      this.cardReShow = !this.cardReShow;
      this.cardReShow = !this.cardReShow;
    },
    // 日期格式化函数
    formatDate(date) {
      let fmtDate = date.toISOString();
      fmtDate =
        fmtDate
          .split(".")[0]
          .replaceAll("-", "")
          .replace("T", "  ") + "   ";
      let localHour = (+fmtDate.substring(10, 12) + 8) % 24;
      fmtDate = fmtDate.substring(0, 10) + localHour + fmtDate.substring(12);
      return fmtDate.toString();
    },
    handleCancel() {
      this.modalConfig.visible = false;
      this.resetFormData();
      console.log("取消操作");
    },
    handleConfirm() {
      console.log("提交表单");
      this.confirmBtnLoading = true;
      // 调接口
      this.modalConfig.visible = false;
      this.resetFormData();
    },
    handleDialogClose() {
      this.resetFormData();
    },
    resetFormData() {
      console.log("重置表单");
      this.memberDetailData = {
        nickname: "",
        phoneNumber: "",
        sex: "",
        creator: "",
        createdDate: "",
        follower: "",
        intention: "",
        transactionPercent: "",
        followLog: ``,
        spaProductItems: [],
        selectedProducts: [],
        expendLog: ""
      };
      this.confirmBtnLoading = false;
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
